<template>
	<view class="content">
		<view class="head" v-if="goods">
			<image :src="goods.goodsImg" class="goodsPic" mode="aspectFit"></image>
			<view class="goodsDesc">
				{{goods.goodsName}}
			</view>
		</view>

		<view class="textArea">
			<textarea style="width: 100%;" :maxlength="260" @input="textChange" :value="commetnText" placeholder="宝贝满足你的期待吗？说说你的情况分享给小伙伴吧~" />
			</view>
		<view class="commentRow">
			<view >
				商品评分
			</view>
			<uniRate @change="grageChage" :value='goodsRate' :margin="5"></uniRate>
			<view class="rate">{{goodsRate}}分</view>
		</view>
		<view class="commentRow">
			<view >
				服务评分
			</view>
			<uniRate @change="srageChage" :value='serviceRate' :margin="5"></uniRate>
			<view class="rate">{{serviceRate}}分</view>
		</view>
		<view class="commentRow">
			<view >
				时效评分
			</view>
			<uniRate @change="erageChage" :value='expressRate' :margin="5"></uniRate>
			<view class="rate">{{expressRate}}分</view>
		</view>
		<view class="updateTips">
			上传图片（最多五张）
		</view>
		<view class="picBox">
			<block v-if="commentPics.length" >
				<view class="picCon"  v-for="(item,index) in commentPics" :key="index">
					<view class="del" @click="delPic(index)">
						<uniIcons type="close"></uniIcons>
					</view>
					<image :src="item" ></image>
				</view>
			</block>
			<view class="picCon uploadBtn" @click="uploadPic">
				
			</view>
		</view>
		<view class="bottomBtn" @click="commit">
			提交
		</view>
	</view>
</template>

<script>
	import uniRate from '@/components/uni-rate/uni-rate.vue'
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	export default {
		 components: {uniRate,uniIcons},
		data() {
			return {
				commetnText:"",
				goodsRate:0,
				serviceRate:0,
				expressRate:0,
				commentPics:[],
				commitPics:[],
				elseCount:5,
				goods:null,
				allow:true
			};
		},
		onLoad(options){
			if(options.goods){
				this.goods=JSON.parse(options.goods)
				console.log(this.goods)
			}
			console.log(this.commit)
		},
		methods:{
			commit(){
				if(this.elseCount==0){
					this.$api.msg('最多上传5张照片！')
					return
				}
				
				if(!this.commetnText&&this.goodsRate==0&&this.serviceRate==0&&this.expressRate==0){
					this.$api.msg('请完善评论信息')
					return
				}
				let that=this
				let data={
						content:that.commetnText,
						goodsId:that.goods.goodsId,
						goodsSpecId:that.goods.goodsSpecId,
						orderId:that.goods.orderId,
						timeScore:that.expressRate,
						goodsScore:that.goodsRate,
						serviceScore:that.serviceRate,
						images:that.commitPics.length==0?'':that.commitPics.join(','),
						orderGoodsId:that.goods.id
					}
				that.$Request.request('/api/Goodsappraises/getAppraise','POST',data).then(res=>{
						if (res.status == 1) {
							that.$api.msg('商品评价成功！')
							setTimeout(()=>{
								uni.navigateBack()
							},800)
						}
					}).catch(err=>{
						console.log(err)
					})
			},
			textChange(e){
				this.commetnText=e.detail.value
			},
			grageChage(e){
				this.goodsRate=e.value
			},
			delPic(index){
				this.commentPics.splice(index,1)
				this.commitPics.splice(index,1)
				this.elseCount++
			},
			srageChage(e){
				this.serviceRate=e.value
			},
			erageChage(e){
				this.expressRate=e.value
			},
			uploadPic(){
				
				let that=this
				uni.chooseImage({
					count:that.elseCount,
					sizeType:'compressed',
					success:(res)=> {
						console.log(res)
						if(res.tempFilePaths.length>0){
							res.tempFilePaths.forEach(item=>{
								
								that.$Request.upload({
									url:'/api/Goodsappraises/userAppraise',
									filePath:item,
									name:'commentPics',
									formData:{},
									success:(res)=>{
											console.log(res)
											let data=JSON.parse(res.data)
											that.commentPics.push(item)
											that.elseCount=5-that.commentPics.length
											that.commitPics.push(data.path)
									},
									fail:(err)=>{
											console.log(err)
									}
								})
							})
							
							// let imgs = res.tempFilePaths.map((value, index) => {  
							//                     return {  
							//                         name: "uploads["+index+"]",  
							//                         uri: value  
							//                     }  
							//                 });
											
							// uni.uploadFile({
							// 	url:'http://www.guagua.com/api/Goodsappraises/userAppraise',
							// 	files:imgs,
							// 	formData:{},
							// 	// filePath:res.tempFilePaths,
							// 	// name:'commentPics',
							// 	success:(res)=>{
							// 		console.log(res)
							// 	},
							// 	fail:(err)=>{
							// 		console.log(err)
							// 	}
							// })
						}
						console.log(that.commentPics)
						
						console.log(that.elseCount)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import './comment.scss'
</style>
